<div class="content">
  <div class="default-header">
    <div class="row">
      <h1 class="col">Projects</h1>
      <button
        class="col"
        mat-raised-button
        color="primary"
        (click)="addBlankProject()"
        class="add-button"
      >
        Add blank project
      </button>
      <button
        class="col"
        mat-raised-button
        color="primary"
        (click)="importProject()"
        class="import-button"
      >
        Import project
      </button>
    </div>
  </div>

  <form>
      <mat-form-field class="full-width">
          <input matInput
              placeholder="Search by name"
              [(ngModel)]="searchText"
              [ngModelOptions]="{standalone: true}">
      </mat-form-field>
  </form>

  <div class="default-content">
    <div class="mat-elevation-z8">
      <mat-table #table [dataSource]="dataSource | projectsfilter: searchText" matSort>
        <ng-container matColumnDef="name">
          <mat-header-cell *matHeaderCellDef mat-sort-header> Name </mat-header-cell>
          <mat-cell *matCellDef="let row">
            <a [routerLink]="['/server', server.id, 'project', row.project_id]" class="table-link">{{ row.name }}</a>
          </mat-cell>
        </ng-container>

        <ng-container matColumnDef="actions">
          <mat-header-cell *matHeaderCellDef> Actions </mat-header-cell>
          <mat-cell *matCellDef="let row" style="text-align: right">
            <button mat-icon-button matTooltip="Open project" (click)="open(row)" *ngIf="row.status == 'closed'">
              <mat-icon aria-label="Open project">play_arrow</mat-icon>
            </button>
            <button mat-icon-button matTooltip="Close project" (click)="close(row)" *ngIf="row.status == 'opened'">
              <mat-icon aria-label="Close project">pause</mat-icon>
            </button>
            <button mat-icon-button matTooltip="Duplicate project" (click)="duplicate(row)" *ngIf="row.status == 'closed'">
              <mat-icon aria-label="Duplicate project">filter_2</mat-icon>
            </button>
            <button mat-icon-button matTooltip="Delete project" (click)="delete(row)" *ngIf="row.status == 'closed'">
              <mat-icon aria-label="Delete project">delete</mat-icon>
            </button>
          </mat-cell>
        </ng-container>

        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
        <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
      </mat-table>
    </div>
  </div>
</div>
